/**
 * Created by zhulizhe on 2017/8/25.
 */
import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity,
    StyleSheet,
    TextInput,
    Button
} from 'react-native';
import {observable, action, computed, observe} from 'mobx'
import {observer} from 'mobx-react/native'
import Constant from "../Contant";

const Input = ({title,placeholder,onChange})=>{
    return <View
        style={[{
            alignItems:'center',
            flexDirection:'row',
            backgroundColor:'white',paddingHorizontal:10,paddingVertical:10},styles.borderBottom]}>
        <View style={{flex:1}}>
            <Text style={{color:Constant.TEXT_COLOR_3,fontSize:14}}>{title}</Text>
        </View>
        <View style={{paddingHorizontal:10,flex:3}}>
            <TextInput
                placeholder={placeholder}
                style={{
                    color:Constant.TEXT_COLOR_3,
                    width:120,
                    height:30,
                    fontSize:14}}/>
        </View>
    </View>
}

export default class ChangePwd extends Component{

    static navigationOptions = ({ navigation }) => {
        const {state, setParams} = navigation;
        return {
            title:'修改密码',
            headerRight: (
                <Button
                    onPress={()=>{

                    }}
                    title='确认'
                />
            ),
        };
    }


    render(){
        return <View style={{flex:1}}>
            <Input title="原密码" placeholder="请输入原密码"/>
            <Input title="新密码" placeholder="请设置新密码"/>
            <Input title="确认新密码" placeholder="请再次输入新密码"/>
        </View>
    }
}

const styles = {
    borderBottom: {
        borderBottomColor: Constant.SEPLINECOLOR,
        borderBottomWidth: StyleSheet.hairlineWidth
    },
}
